<script lang="ts" setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { getSchemaApi } from '#/api/core/lowcode';
import { message } from 'ant-design-vue';
import PublishComponent from './single-page.vue';

const route = useRoute();
const loading = ref(false);
const schemaData = ref<Record<string, any> | null>(null);

interface LowcodeConfig {
  redirect: string;
}

// 扩展 RouteMeta 类型
declare module 'vue-router' {
  interface RouteMeta {
    lowcode?: LowcodeConfig;
  }
}

// 加载数据
async function loadData() {
  // 从meta.lowcode中获取redirect参数
  const redirect = route.meta.lowcode?.redirect as string;
  if (!redirect) {
    console.warn('No redirect found in route meta:', route.meta);
    return;
  }

  try {
    loading.value = true;
    const data = await getSchemaApi(redirect);
    schemaData.value = data;
  } catch (error) {
    console.error('Failed to load schema:', error);
    message.error('加载配置失败');
  } finally {
    loading.value = false;
  }
}

loadData();

console.log('Route meta:', route.meta);
console.log('Lowcode config:', route.meta.lowcode);
</script>

<template>
  <div v-if="loading" class="loading-container">
    加载配置中...
  </div>
  <PublishComponent v-else-if="schemaData" v-bind="schemaData" />
</template>
